<template>
  <view>
    <u-cell-group>
		<u-cell title="头像" center :isLink="true" @click="upload()">
			<view slot="value">
				<u-avatar
					v-if="user.avatar"
					slot="icon"
					shape="square"
					size="40"
					:src="user.avatar">
				</u-avatar>
				<u-avatar
					v-else
					:text="xName"
					:fontSize="user.userName.length > 2?15:18"
					shape="square"
					size="40"
					bgColor="#0087FC">
				</u-avatar>
			</view>
		</u-cell>
	  <image-cropper :show-reset-btn="showBtn" :show-rotate-btn="showBtn" crop-fixed :src="tempFilePath" @confirm="confirm" @cancel="cancel"></image-cropper>
	  <!-- <image :src="cropFilePath" mode="aspectFit" style="width: 100%;"></image> -->
      <u-cell title="姓名" :value="user.userName" ></u-cell>
      <u-cell title="手机号" :value="user.phonenumber" ></u-cell>
      <!-- <u-cell title="身份证号" :value="user.idCard" ></u-cell> -->
	  <u-cell title="所属部门" :value="user.dept.deptName" ></u-cell>
    </u-cell-group>
	
  </view>
</template>

<script>
import { avatar } from '@/api/user.js'
import ImageCropper from "@/components/invinbg-image-cropper/invinbg-image-cropper.vue";

export default {
	components: {ImageCropper},
	data() {
		return {
			showBtn: false,
			image:'https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/c31990f80394475a801d2ce9da428ab0.png',
			tempFilePath: '',
			user:{},
			xName:'',
		}
	},
	onLoad() {
		this.user = uni.getStorageSync("loginInfo").user
		this.xName = this.user.userName.slice(1)
	},
	methods: {
		upload() {
			var that = this
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: (res) => {
					that.tempFilePath = res.tempFilePaths.shift()
				}
			});
		},
		confirm(e) {
			this.updateAvatar(e.detail.tempFilePath)
			this.tempFilePath = ''
		},
		async updateAvatar(tempFilePath){
			const result = await avatar(tempFilePath)
			let loginInfo = uni.getStorageSync("loginInfo")
			loginInfo.user.avatar = result.url
			this.user.avatar = result.url
			uni.setStorageSync("loginInfo",loginInfo)
		},
		cancel(){
			this.tempFilePath = ''
		},
	}
}
</script>

<style lang="scss">
	.avatar {
		width: 96rpx;
		height: 96rpx;
	}

	.model-wraper {
		width: 600rpx;
		background-color: #fff;
		border-radius: 16rpx;
		position: absolute;
		z-index: 1000;
		top: 50%;
		left: 50%;
		margin-top: -300rpx;
		margin-left: -300rpx;
		// box-shadow: #dcdcdc 0px 0px 20rpx;
	}

	.modal-body {
		/* padding: 30rpx 30rpx 80rpx 30rpx; */
		margin:10rpx 30rpx;
	}

	.style-font {
		color: #A1AAA9;
		font-size: 28rpx;
	}

</style>
